import { Card, Descriptions, Button } from 'antd'
import React, { useEffect, useState } from 'react'
import { getHosListDetailRequest } from '@/api/hospital/hospitalList'
import { useNavigate, useParams,Location, useLocation } from 'react-router-dom'

import {
  hospitalDetailReturnType,
  hospitalListItemsType,
  BookingRuleType
} from '@/api/hospital/model/hospitalListType'

//为了让useLocation可以使用state,我们需要封装一个自定义Hook
//自定义Hook可以接受一个泛型,这个泛型就是state属性值的类型
function useMyLocation<T>(){
  type L = Location & {state:T}
  return useLocation() as L;
}

export default function HospitalShow() {
  const navigate = useNavigate()

  const { id } = useParams()
  console.log(id,'idd');

  //使用自定义Hook拿到路由传值中state的值
  const location = useMyLocation<{hello:string}>();
  const {hello} = location.state;
  console.log('hello',hello);
  

  //书写一个保存详情信息的状态
  const [detail, setDetail] = useState<hospitalDetailReturnType>({})


  //刚加载组件就发送科室列表请求
  useEffect(() => {
    const getHosDetail = async () => {
      const result = await getHosListDetailRequest(id as string)
      console.log(result);

      //把数据设置给state
      setDetail(result)

    }
    getHosDetail()
  }, [])

  //事件函数
  // 1.点击按钮返回事件
  const goBackHandle = ()=>{
    navigate(-1)
  }
  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">{(detail.hospital as hospitalListItemsType)?.hosname}</Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {(detail.hospital as hospitalListItemsType)?.logoData ? (
            <img
              width={100}
              src={`data:image/jpeg;base64,${(detail.hospital as hospitalListItemsType)?.logoData
                }`}
              alt=""
            />
          ) : (
            ""
          )}
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {(detail.hospital as hospitalListItemsType)?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {(detail.hospital as hospitalListItemsType)?.param?.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="医院坐车路线" span={2}>
          {(detail.hospital as hospitalListItemsType)?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {(detail.hospital as hospitalListItemsType)?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions style={{ marginTop: "25px" }} title="预约规则信息" bordered column={2}>
        <Descriptions.Item label="预约周期">
          {(detail.bookingRule as BookingRuleType)?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {(detail.bookingRule as BookingRuleType)?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {(detail.bookingRule as BookingRuleType)?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {(detail.bookingRule as BookingRuleType)?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {(detail.bookingRule as BookingRuleType)?.rule.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
      </Descriptions>

      <Button onClick={goBackHandle} style={{ marginTop: "25px" }}>返回</Button>
    </Card>
  )
}
